<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="js-css/easyui.css" rel="stylesheet" />
		<link href="js-css/icon.css" rel="stylesheet" />
		<script src="../../js/jquery.min.js"></script>
		<script src="js-css/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js-css/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>
		
		<style>
			/* 控件区域 */
			.toolAreas {
		        width: 280px;
		        height: 500px;
		        display: inline-block;
		        border: 2px solid red;
		        vertical-align: middle;
		        padding-left:5px;
		    }
			
			.item{
				padding-left: 15px;
				
			}
			.assigned{
				padding-left: 15px;
			}

			/* 放置区域 */
		    .showAreas {
		        width: 800px;
		        height: 500px;
		        display: inline-block;
		        border: 2px solid red;
		        vertical-align: middle
		    }
			/* 属性区域 */
			.propertyAreas{
				 width: 300px;
				 height: 500px;
				 display: inline-block;
				 border: 2px solid  #95B8E7;
				 vertical-align: middle
			}
			p{
				height: 30px;
				border-bottom: 1px solid red;
				padding: 0;
				margin: 0;
			}
		</style>
	</head>
	<body>
		<div class="toolAreas">
			<p>工具列表</p>
			<div id="Draggable">
				<table>
					<tr>
						<td>
							<div class="item item1"><label>说明标签</label></div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="item item1"><input type="text"></div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="item"><input type="checkbox"></div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="item"><input type="radio"></div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="item"><textarea></textarea></div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="item">
								<select>
									<option value="0">全部</option>
									<option value="1">1</option>
									<option value="2">2</option>
								</select>
							</div>
						</td>
					</tr>

				</table>
			</div>
		</div>

		<form id="form" class="showAreas" onsubmit="return false">
			<p>效果展示区</p>

			<div id="Droppable" style="width:100%;height:170px;">


			</div>
			<div id="Droppable1" style="width:100%;height:150px; border-top:1px solid red;">

			</div>
			<div id="Droppable2" style="width:100%;height:150px; border-top:1px solid red;">

			</div>
		</form>


		<div class="propertyAreas">
			<p>属性设置</p>
			<div style="height: 200px;">
				<table id="pg" style="width:300px;display: none;">
					<tr>
						<td> <label>属性名称</label></td>
						<td> <label>属性值</label></td>
					</tr>
					<tr>
						<td> <label>name</label></td>
						<td> <input id="nameValue"></td>
					</tr>
					<tr>
						<td> <label>text</label></td>
						<td> <input id="textValue"></td>
					</tr>


					<!-- 					<tr>
						<td colspan="2">
							<button id="prolock">锁定元素</button>
							<button id="proopen">解除锁定</button>
						</td>

					</tr> -->
				</table>
			</div>
			<p></p>
			<p>按钮</p>
			<div style="text-align: center;">
				<button id="save"> 提交</button>
				<button id="prolock">锁定元素</button>
				<button id="proopen">解除锁定</button>
			</div>

		</div>

		<script type="text/javascript">
			//参数
			var targetLeft, targetTop; //定义位置移动变量

			var k = 1,
				m = 1; //定义区域变量

			//控件区
			$('.item').draggable({
				revert: true,
				//proxy: 'clone',
				proxy: function(source) {
					var p = $('<div style="border:1px solid #ccc;"></div>');
					p.html($(source).html()).appendTo('body');
					return p;
				},

				onStartDrag: function() {
					console.log("onStartDrag")
					$(this).draggable('options').cursor = 'not-allowed';
					$(this).draggable('proxy').css('z-index', 10);
				},
				onStopDrag: function(e) {
					console.log("onStopDrag")
					$(this).draggable('options').cursor = 'move';
				},
				onDrag: function(e) {
					targetLeft = e.data.left;
					targetTop = e.data.top;
				},
			});

			//放置区
			$('#Droppable').droppable({
				onDragEnter: function(e, source) {
					console.log("onDragEnter")
				},
				onDragLeave: function(e, source) {
					console.log("onDragLeave")
					$(source).draggable('options').cursor = 'move';
				},
				onDrop: function(e, source) {
					console.log("onDrop")
					var that = this;
					if ($(source).hasClass('assigned')) {} else {
						var target = $(source).clone().addClass('assigned').removeClass("item");
						target.draggable({
							revert: false,
						});

						//设置样式
						target.css("position", "absolute");
						target.css("left", targetLeft);
						target.css("top", targetTop);

						//元素的控制-指定元素属性值
						target.on("click", function() {
							console.log("点击事件")
							propertyInit(target);
						})
						$(that).append(target);
					}
					//$(this).append(source)
				}
			});

			$('#Droppable1').droppable({
				accept: ".item",
				onDrop: function(e, source) {
					console.log("onDrop")
					var that = this;
					if ($(source).hasClass('assigned')) {} else {
						var target = $(source).clone().addClass('assigned').removeClass("item");
						target.draggable({
							revert: false,
							//edge:10,
							onBeforeDrag: function(e) {
								var currentTarget = e.toElement;
								if ($(currentTarget).is('.assigned')) {
								} else {
									return false;
								}
							}
						});
						//设置样式
						target.css("position", "absolute");
						target.css("left", targetLeft);
						target.css("top", targetTop);
						$(that).append(target);
						var itemName = "K" + k;
						target.children().attr("name", itemName)
						k++;
					}
					//$(this).append(source)
				}
			});

			$('#Droppable2').droppable({
				accept: ".item1",
				onDrop: function(e, source) {
					console.log("onDrop")
					var that = this;
					if ($(source).hasClass('assigned')) {} else {
						var target = $(source).clone().addClass('assigned').removeClass("item");
						target.draggable({
							revert: false,
							//edge:10,
							onBeforeDrag: function(e) {
								var currentTarget = e.toElement;
								//if(e.toElement)
								if ($(currentTarget).is('.assigned')) {
								} else {
									return false;
								}

							}
						});
						//设置样式
						target.css("position", "absolute");
						target.css("left", targetLeft);
						target.css("top", targetTop);
						$(that).append(target);
						var itemName = "m" + m;
						target.children().attr("name", itemName)
						m++;
					}
					//$(this).append(source)
				}
			});



			//提交
			$("#save").on("click", function() {
				//获取表单
				var form = $("#form");
				console.log(form.serializeArray());

			})



			//属性
			var nowtarget;

			function propertyInit(target) {
				$("#pg").css("display", "block");
				nowtarget = target;
				//设置name属性
				var targetSon = target.children();
				var nameValue = targetSon.attr("name");
				$("#nameValue").val(nameValue);
				//设置text文本
				var textValue = targetSon.text();
				$("#textValue").val(textValue);

				if (targetSon.is('input')) {
					console.log("input")
				}
				if (targetSon.is('label')) {
					console.log("label")
				}
			}

			$("#nameValue,#textValue").on("blur", function() {
				console.log("离开事件")
				var that = this;
				var targetSon = nowtarget.children();
				targetSon.attr("name", $("#nameValue").val());
				targetSon.val($("#textValue").val())
				targetSon.text($("#textValue").val())
			})

			//锁定元素	
			$("#prolock").on("click", function() {
				$(".assigned").draggable('disable');

			})
			//解除锁定
			$("#proopen").on("click", function() {
				$(".assigned").draggable('enable');

			})
		</script>

	</body>
</html>
